<script setup>
import {reactive, ref} from "vue";
import {DeactiveUser, GetSearchStu, GetStu} from "@/api/index.js";
import moment from "moment";
import {ElMessage} from "element-plus";

const tableData = ref([]);
// 分页
const total = ref();
// 赋值数据
let pageSize = ref(5);
let currentPage = ref(1);
// 用户搜索的字段数据
const Search_Data = reactive({
  username: null,
  mobile: null,
  email: null,
  type: 2
});
// 通过用户输入的查询数据进行数据查询
const handleRemoveSearchData = () => {
  for (let i in Search_Data) {
    Search_Data[i] = null
  }
  Search_Data.type = 2
}
const handleSearchStuInfo = async (data) => {
  try {
    const res = await GetSearchStu({...Search_Data, ...data})//对象展开运算符（...），它会将两个对象的所有可枚举属性复制到一个新对象中
    tableData.value = res.results
    total.value = res.count
    handleRemoveSearchData()
  } catch (error) {
    console.log(error);
  }
}

const handleSearchStuInfoBtn = () => {
  currentPage.value = 1
  handleSearchStuInfo({
    page: currentPage.value,
    size: pageSize.value,
  })
}
const handleGetStu = async (data) => {
  try {
    const res = await GetStu(data)
    tableData.value = res.results,
        total.value = res.count
  } catch (error) {
    console.log(error);
  }
}
handleGetStu({
  page: currentPage.value,
  size: pageSize.value
})
//分页器
const handleCurrentChange = async (val) => {
  currentPage.value = val;
  await handleGetStu({
    page: currentPage.value,
    size: pageSize.value
  })
}
const handleScreenSex = (val)=>{
  return val===0?"女":"男"
}

const handleEdit = async (id)=>{
  try {
    const res = await DeactiveUser({id})
    if (res.status===201){
      const index = tableData.value.findIndex(item=>item.id===id)
      tableData.value[index].is_active  = !tableData.value[index].is_active
      ElMessage.success(res.msg)
    }else{
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<template>
  <div class="search">
    <div class="mt-4">
      账号：
      <el-input style="width: 800px" v-model="Search_Data.username" placeholder="请输入账号进行查询"
                class="input-with-select">
      </el-input>
    </div>
    <div class="mt-4">
      手机：
      <el-input style="width: 800px" v-model="Search_Data.mobile" placeholder="请输入手机号进行查询"
                class="input-with-select">
      </el-input>
    </div>
    <div class="mt-4">
      邮箱：
      <el-input style="width: 800px" v-model="Search_Data.email" placeholder="请输入邮箱进行查询"
                class="input-with-select">
      </el-input>
    </div>
    <div class="button">
      <el-button type="primary" @click="handleSearchStuInfoBtn">查询</el-button>
    </div>
  </div>

  <div class="list">
    <el-table :data="tableData" style="width: 1500px">
      <el-table-column label="入学时间" width="250" header-align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center; margin-left: 20px">

            <span style="margin-left: 10px"> {{ moment(scope.row.date_joined).format('YYYY-MM-DD HH:mm:ss') }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="账号" width="120" header-align="center">
        <template #default="scope">
          <span style="margin-left: 25%">{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column label="名称" width="120" header-align="center">
        <template #default="scope">
          <span style="margin-left: 20%">{{ scope.row.first_name }}</span>
        </template>
      </el-table-column>


      <el-table-column label="年龄" width="60" header-align="center">
        <template #default="scope">
          <span style="margin-left: 20%">{{ scope.row.userdetail.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="60" header-align="center">
        <template #default="scope">
          <span style="margin-left: 20%">{{ handleScreenSex(scope.row.userdetail.sex) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="120" header-align="center">
        <template #default="scope">
          <span style="margin-left: 0%">{{ scope.row.userdetail.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="190" header-align="center">
        <template #default="scope">
          <span style="margin-left: 16%">{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系地址" width="200" header-align="center">
        <template #default="scope">
          <span style="margin-left: 20%">{{ scope.row.userdetail.address }}</span>
        </template>
      </el-table-column>


      <el-table-column label="所在班级" width="200" header-align="center">
        <template #default="scope">
          <span style="margin-left: 33%">{{ scope.row.class_name }}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" header-align="center" width="200">
        <template #default="scope">
          <div style="margin-left: 35%">

            <el-button size="small" type="danger" @click="handleEdit(scope.row.id)"
                       v-if="scope.row.is_active">封号
            </el-button>

            <el-button size="small" type="info" @click="handleEdit(scope.row.id)" v-else>解封</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="pagination" v-if="total > 0">
    <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next" :total="total"
                   class="mt-4" :current-page="currentPage"/>
  </div>
</template>

<style scoped lang="less">
.search {
  width: 900px;
  margin: auto;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 8px 30px rgb(0 80 179 / 12%);
  border-radius: 10px;
  margin-bottom: 40px;

  .mt-4 {
    margin-bottom: 20px;
    margin-left: 20px;

    .el-input {
      width: 300px;
    }
  }

  .button {
    width: 400px;
    margin: auto;
    padding-bottom: 20px;

    .el-button {
      width: 400px;
    }
  }

  .mt-4:nth-child(1) {
    margin-top: 20px;
  }
}

.list {
  width: 100%;

  .el-table {
    margin: auto;
  }

}

.pagination {
  width: 100%;

  .el-pagination {
    width: 200px;
    margin: 20px auto;
  }
}
</style>